<template>
  <div class="mv-item" @click="toMvDetail(item.id)">
    <div class="left">
      <img
        :src="item.resource ? item.resource.mlogBaseData.coverUrl : item.imgurl"
      />

      <!-- 总时长 -->
      <span>{{
        item.resource
          ? item.resource.mlogBaseData.duration
          : item.duration | formatSeconds
      }}</span>
    </div>
    <div class="right">
      <!-- mv名称 -->
      <div class="top">
        {{ item.resource ? item.resource.mlogBaseData.text : item.name }}
      </div>

      <!-- 发布时间 -->
      <div class="middle">
        {{
          item.resource
            ? item.resource.mlogBaseData.pubTime
            : item.publishTime | formatDate
        }}
      </div>

      <!-- 播放次数 -->
      <div class="bottom">
        {{
          item.resource
            ? item.resource.mlogExtVO.playCount
            : item.playCount | parsePlayCount
        }}播放
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MvItem",
  props: {
    item: Object,
  },
  methods: {
    /**
     * 跳转至mv详情
     * @param id mv id
     */
    toMvDetail(id) {
      this.$router.push({ path: "/video_detail", query: { id } });
    },
  },
};
</script>

<style lang="less" scoped>
.mv-item {
  width: 100%;
  display: flex;
  margin-bottom: 10px;

  .left {
    position: relative;
    width: 200px;
    height: 100%;

    img {
      transform: scale(0.9);
      border-radius: 10px;
    }

    span {
      position: absolute;
      right: 15px;
      bottom: 15px;
      color: #fff;
      font-size: 12px;
    }
  }

  .right {
    flex: 1;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .top {
      font-weight: bold;
      display: -webkit-box;
      line-clamp: 2;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .middle,
    .bottom {
      color: #707070;
      font-size: 13px;
    }
  }
}
</style>
